<template>
  <Card dis-hover>
      <div class="tableTop" slot="title">
        <Button icon="ios-download-outline" type="primary" @click="exportOuts">导出数据</Button>
        <form v-model="conditions">
            <Input enter-button placeholder="输入用户姓名" class="searchBox" clearable v-model="conditions.username" @on-change="changeConditions">
                <Icon type="ios-search" slot="prefix" />
            </Input>
            <DatePicker format="yyyy-MM-dd HH:mm:ss" type="daterange" placement="bottom-end"  
            placeholder="输入时间查询" style="width: 320px" v-model="conditions.twoDate" class="twoDateBox" @on-change="changeConditions"></DatePicker>
            <RadioGroup v-model="conditions.ASC" @on-change="changeConditions">
                <Radio label="1">升序</Radio>
                <Radio label="0">降序</Radio>
            </RadioGroup>
        </form>
      </div>
      <div>
        <Table border :columns="columns" :data="passRecord" :loading="loading" stripe >
          <template slot="action" slot-scope="scope">
            <Tooltip content="健康预警" placement="top" class="btn">
                <Button type="warning" icon="md-notifications-outline" @click="showExceptionBox(scope.row)"></Button>
            </Tooltip>
            <Tooltip content="查看详情" placement="top">
                <Button type="primary" icon="md-eye" @click="showRecordBox(scope.row)"></Button>
            </Tooltip>
          </template>
        </Table>
      </div>
      <!-- 分页 -->
      <div class="page">
        <Page :total="total" :page-size="10" @on-change="currentPage" />
      </div>
      <!-- 预警对话框 -->
      <Modal title="健康预警" class-name="vertical-center-modal" v-model="showException" 
      @on-ok="sendException">
        <Form :model="exception" label-position="left" :label-width="100">
            <FormItem label="用户编号">
                <Input v-model="exception.userOpenid" readonly></Input>
            </FormItem>
            <FormItem label="检查人员">
                <Input v-model="exception.inspectorOpenid" readonly></Input>
            </FormItem>
            <FormItem label="预警信息">
                <Input v-model="exception.reason" maxlength="100" 
                show-word-limit type="textarea" placeholder="不多于100字" :rows="4" />
            </FormItem>
        </Form>
      </Modal>
      <!-- 详情对话框 -->
      <Modal class-name="vertical-center-modal" v-model="showRecord" :width="400">
          <Divider>用户信息</Divider>
        <Form :model="userData" label-position="left" :label-width="80">
            <FormItem label="姓名">
                <Input v-model="userData.name" readonly></Input>
            </FormItem>
            <FormItem label="年龄">
                <Input v-model="userData.year" readonly></Input>
            </FormItem>
            <FormItem label="性别">
                <Input v-model="userData.sex" readonly></Input>
            </FormItem>
            <FormItem label="电话">
                <Input v-model="userData.phone" readonly></Input>
            </FormItem>
        </Form>
        <Divider>检察人员信息</Divider>
        <Form :model="InspectorData" label-position="left" :label-width="80">
            <FormItem label="姓名">
                <Input v-model="InspectorData.name" readonly></Input>
            </FormItem>
            <FormItem label="性别">
                <Input v-model="InspectorData.sex" readonly></Input>
            </FormItem>
            <FormItem label="电话">
                <Input v-model="InspectorData.phone" readonly></Input>
            </FormItem>
        </Form>
      </Modal>
  </Card>
</template>

<script>
export default {
  data () {
      return {
          columns: [
              {
                  title: '记录编号',
                  key: 'outId'
              },
              {
                  title: '用户openid',
                  key: 'userOpenid'
              },
              {
                  title: '检查员openid',
                  key: 'inspectorOpenid'
              },
              {
                  title: '时间',
                  key: 'times',
                  sortable: true,
                  width:180
              },
              {
                  title: '体温',
                  key: 'temp'
              },
              {
                  title: '健康状况',
                  key: 'health',
                  width:200
              },
              {
                  title: '操作',
                  slot: 'action',
                  align: 'center',
                  width: 120
              }
          ],
          passRecord:[],
          total: 0,
          page: 0,
          loading: true,
          showException: false,
          showRecord:false,
          exception: {},
          userData:{},
          InspectorData:{},
          conditions:{
              twoDate:[],
              username:null,
              page:0,
              ASC:'1'
          }
      }
  },
  created(){
      this.getOutsList()
  },
  methods:{
      changeConditions(event){
        //   console.log(event)
          this.conditions.page=0
          this.getOutsList()
      },
      async getOutsList(){
        //   console.log(this.conditions)
          this.loading=true
          const {data:res} = await this.$http.post(`/outs/conditions`, this.$qs.stringify(this.conditions))
        //   console.log(res)
          this.total=res.data.totalElements
          this.passRecord=res.data.content
          this.loading=false
      },
      currentPage(newPage){
        //   console.log(newPage)
          this.conditions.page = newPage-1
          this.getOutsList()
      },
      showExceptionBox(record){
          this.exception.userOpenid=record.userOpenid
          this.exception.inspectorOpenid=record.inspectorOpenid
          this.exception.reason=''
          this.showException=true
      },
      async sendException(){
          const {data:res} = await this.$http.post(`/exception/sendException`, this.$qs.stringify(this.exception))
          if(res.errorCode !== 200) return this.$message.error('账号已注销，发送失败')
          return this.$message.success('发送成功')
          this.showException=false
      },
      async showRecordBox(record){
          const {data:res1} = await this.$http.get(`/user/openId/${record.userOpenid}`)
          this.userData=res1.data
          const {data:res2} = await this.$http.get(`/inspector/openId/${record.inspectorOpenid}`)
          this.InspectorData=res2.data
          this.showRecord=true
      },
      exportOuts(){
        this.$http({
            method: 'post',
            url: '/export/exportPass/outs',
            data:this.$qs.stringify(this.conditions),
            responseType: 'blob'
        }).then(res => {
            // console.log(res)
            let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'});
            window.URL = window.URL || window.webkitURL;
            let href = URL.createObjectURL(blob);
            let downA = document.createElement("a");
            downA.href =  href;
            downA.download = '出门记录表.xls';
            downA.click();
            window.URL.revokeObjectURL(href);
        })
      }
  }
}
</script>

<style scoped>
.page{
    margin: 15px 0;
}
.btn{
    margin-right: 8px;
}
.tableTop{
    justify-content: space-between;
    display: flex;
}
.searchBox{
    width: 180px;
}
.twoDateBox{
    margin: 5px;
}
</style>